<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <link rel="icon" href="./source/image/icon.png">
    <title>JS 30: Ajax Type Ahead</title>
</head>
<body>
    <div class="background">
        <div class="title">
            <p>Draw something on the canvas</p>
        </div>
        <section class="canvas-component">
            <div class="canvas-component__top"></div>
            <div class="canvas-component__body">
                <canvas id="here-we-drawing" width="100" height="100"></canvas>
            </div>
            <div class="canvas-component__bottom"></div>
        </section>
        <div class="canvas-tools">
            <div class="tools__width-line">
                <div>
                    <p>Set width</p>
                    <p>Now <span class="size-width">10</span> px</p>
                </div>
                <input type="range" min="10" max="100" value="10">
            </div>
            <div class="tools__color-line">
                <p>Set color</p>
                <input type="color">
            </div>
        </div>
    </div>

    <script src="./main.js"></script>
</body>
</html>
